<template>
    <div class="tag-view-container" ref="tagViewContainerRef">
        <ElScrollbar
            ref="elScrollRef"
            class="scroll-container"
            :vertical="false"
            @wheel.prevent="handleScroll"
        >
            <div
                v-for="tag in visitedViewTagsRef"
                :key="tag.fullPath"
                class="tags-item"
                :class="{ active: $route.fullPath === tag.fullPath }"
                :data-fullPath="tag.fullPath"
                @click="pushRouteAndMove2Tag(tag.fullPath)"
                @contextmenu.prevent="
                    selectedTag = openTagMenuAndReturnSelectedTag(tag, $event)
                "
            >
                {{ tag.title }}
                <span
                    v-if="!isAffix(tag)"
                    class="tags-item-close"
                    @click.stop="closeSelectedTag(tag, currentRouteFullPathRef)"
                >
                    <div class="close-icon">
                        <ElIcon :size="12">
                            <el-icon-close></el-icon-close>
                        </ElIcon>
                    </div>
                </span>
            </div>
        </ElScrollbar>

        <!-- tag标签操作菜单 -->
        <ul
            v-show="tagMenuVisible"
            class="tag-menu"
            :style="{ left: menuLeft + 'px', top: menuTop + 'px' }"
        >
            <li @click="refreshSelectedTag(selectedTag)">
                <SvgIcon a-icon="refresh" />
                刷新
            </li>
            <li
                v-if="!isAffix(selectedTag)"
                @click="closeSelectedTag(selectedTag, selectedTag.fullPath)"
            >
                <SvgIcon a-icon="close" />
                关闭
            </li>
            <li @click="closeOtherTags">
                <SvgIcon a-icon="close_other" />
                关闭其它
            </li>
            <li
                v-if="!isFirstView()"
                @click="closeLeftTags(currentRouteFullPathRef)"
            >
                <SvgIcon a-icon="close_left" />
                关闭左侧
            </li>
            <li
                v-if="!isLastView()"
                @click="closeRightTags(currentRouteFullPathRef)"
            >
                <SvgIcon a-icon="close_right" />
                关闭右侧
            </li>
            <li @click="closeAllTags()">
                <SvgIcon a-icon="close_all" />
                关闭所有
            </li>
        </ul>
    </div>
    <!-- <button ref="buttonRef">a</button> -->
</template>
<script setup lang="ts">
import { computed, nextTick, onMounted, ref, watch } from "vue";
import { NslUtil4Vue } from "@/utils/NslUtil4Vue";
import { ElScrollbar } from "element-plus";
import { RouteLocationNormalizedLoaded, useRoute, useRouter } from "vue-router";
import { useTagViewStore } from "@/store/modules/tag-view-store";
import { storeToRefs } from "pinia";
import {
    fullPathRoute2TagView,
    isAffix,
    closeSelectedTag,
    initTsParameters,
    initAffixTags,
    pushRouteAndMove2Tag,
    moveToCurrentTag,
} from "./tag_view_fns";

import {
    refreshSelectedTag,
    closeOtherTags,
    isFirstView,
    closeLeftTags,
    isLastView,
    closeRightTags,
    closeAllTags,
    openTagMenuAndReturnSelectedTag,
    initTagContextMenuParameters,
} from "./tag_context_menu.ts";
import SvgIcon from "../svg_icon/svg_icon_index.vue";
import { staticRoutes,staticShowRoutes } from "@/routes/static_routes.ts";

//#region defineXxx
defineOptions({
    name: "tag_view",
});

const tagViewStore = useTagViewStore();
const { visitedViews: visitedViewTagsRef } = storeToRefs(tagViewStore);

const props = defineProps({
    // propA: {
    //     type: String,
    //     required: true,
    // },
    propB: {
        type: Number,
        default: 1,
    },
    // propC: {
    //     type: String as PropType<MyType>,
    //     required: true,
    // },
});

const emit = defineEmits<{
    event1: [para1: number, para2: string];
    event2: [para1: number, para2: string];
}>();
//#endregion
const route = useRoute();
const router = useRouter();
const currentRouteFullPathRef = ref("");
const elScrollRef = NslUtil4Vue.componentRef(ElScrollbar);
const tagAndTagSpacing = 4;
let elScrollWrapDom: HTMLDivElement;

// initAffixTags(staticRoutes);

initAffixTags(staticShowRoutes)

onMounted(() => {
    elScrollWrapDom = elScrollRef.value?.wrapRef!;
    addTag();
    moveToCurrentTag(useRoute().fullPath);
    currentRouteFullPathRef.value = useRoute().fullPath;
    console.log("in onMounted");
    initTsParameters(
        useRouter(),
        useRoute(),
        elScrollWrapDom,
        tagAndTagSpacing
    );
    initTagContextMenuParameters(
        router,
        elScrollWrapDom,
        menuLeft,
        menuTop,
        tagMenuVisible
    );
});

watch(
    route,
    () => {
        console.log("in watch");
        addTag();
        currentRouteFullPathRef.value = route.fullPath;
        moveToCurrentTag(route.fullPath);
    },
    {
        //immediate: true, //初始化立即执行
    }
);

function addTag(routeP = route) {
    if (routeP.meta.title) {
        tagViewStore.addVisitedView(fullPathRoute2TagView(routeP));
    }
}

const handleScroll = (e: WheelEvent) => {
    console.log("in handle scorll");
    const eventDelta = -(e as any).wheelDelta || -e.deltaY * 40;
    elScrollWrapDom.scrollLeft = elScrollWrapDom.scrollLeft + eventDelta / 4;
};

//开始 tagMenu代码
const tagViewContainerRef = ref<HTMLDivElement>();
let selectedTag: TypeTagViewI;

const menuLeft = ref(0);
const menuTop = ref(0);

const tagMenuVisible = ref(false); // 标签操作菜单显示状态
watch(tagMenuVisible, (value) => {
    const toggle = () => {
        tagMenuVisible.value = false;
    };
    if (value) {
        document.body.addEventListener("click", toggle);
    } else {
        document.body.removeEventListener("click", toggle);
    }
});
</script>
<style lang="scss" scoped>
.tag-view-container {
    position: relative;
    width: 100%;
    // overflow: hidden;
    white-space: nowrap;
    height: $layoutTagHeight;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    // margin-top: 5px;
    // margin-bottom: 5px;
    .tags-item {
        display: inline-block;
        padding: 3px 8px;
        margin: 4px 0 0px 5px;
        font-size: 12px;
        cursor: pointer;
        border: 1px solid #ccc;

        &:first-of-type {
            margin-left: 10px;
        }

        &:last-of-type {
            margin-right: 15px;
        }

        &:hover {
            color: var(--el-color-primary);
        }

        &.active {
            color: #fff;
            background-color: var(--el-color-primary);
            border-color: var(--el-color-primary);

            &::before {
                display: inline-block;
                width: 8px;
                height: 8px;
                margin-right: 5px;
                content: "";
                background: #fff;
                border-radius: 50%;
            }
        }

        &-close {
            border-radius: 100%;
            display: inline-block;
            position: relative;
            width: 12px;
            height: 12px;
            top: 2px;
            &:hover {
                color: #fff;
                background: rgb(0 0 0 / 16%);
            }
        }
        .close-icon {
            display: inline-block;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    }

    .tag-menu {
        position: absolute;
        z-index: 99;
        font-size: 12px;
        background: var(--el-bg-color-overlay);
        border-radius: 4px;
        box-shadow: var(--el-box-shadow-light);

        li {
            padding: 8px 16px;
            cursor: pointer;

            &:hover {
                background: var(--el-fill-color-light);
            }
        }
    }
}
</style>
